<template>
	<UniPopup ref="passwordPopup" type="center" :maskClick="maskClick">
		<view class="password-popup-container">
			<view class="password-popup-title">{{title}}</view>
			<view class="password-popup-input">
				<uni-easyinput type="password" v-model="password" :placeholder="placeholder"></uni-easyinput>
			</view>
			<view class="password-popup-footer">
				<view
					v-if="isCancel"
					class="password-popup-btn"
					style="border-right: 1px solid #ddd;"
					@click="cancel"
				>
					{{cancelText}}
				</view>
				<view
					class="password-popup-btn"
					style="color: #3E2AD1"
					@click="saveSubmit"
				>
					{{sureText}}
				</view>
			</view>
		</view>
	</UniPopup>
</template>

<script>
	import uniEasyinput from '@/components/uni-easyinput/uni-easyinput'
	import UniPopup from '@/components/uni-popup/uni-popup.vue'
	import { aboutWallet } from '@/common/businessCommon.js'
	import { mapState } from 'vuex'
	//import lan from '../Framework/language'
	export default {
		props: {
			title: {
				type: String,
				default: '请验证密码'
			},
			placeholder: {
				type: String,
				default: '请输入密码'
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			isCancel: {
				type: Boolean,
				default: true
			},
			maskClick: {
				type: Boolean,
				default: true
			},
			sureText: {
				type: String,
				default: '确定'
			}
		},
		components: {
			UniPopup,
			uniEasyinput,
		},
		data() {
			return {
				password: '',
			}
		},
		computed: {
			...mapState(['defaultWallet']),
		},
		methods: {
			showPasswordPopup({cancel, success, fail} = {}) {
				if(cancel) this.a_success = success;
				if(success) this.a_cancel = cancel;
				if(fail) this.a_fail = fail;
				this.$refs.passwordPopup.open();
			},
			closePasswordPopup() {
				this.$refs.passwordPopup.close()
				this.password = ''
			},
			cancel() {
				this.a_cancel && this.a_cancel();
			  this.closePasswordPopup()
				this.$emit('click', {status: false, password: this.password })
			},
			saveSubmit() {
				//Get the time stamp of 0:00 today
				const toDayTimes = new Date(new Date().toLocaleDateString()).getTime();
				//Judge whether to freeze or not
				if(toDayTimes < this.defaultWallet.lastPassWordTime) {
						this.$showToast('当日密码输入错误次数过多，请明天再试')
						return
				}

				const passwordCheckResult = aboutWallet.checkPassword(this.defaultWallet.address, this.password)
				if(!passwordCheckResult){
					this.password = ''
					this.$store.commit('setPasswordErrorNum', ++this.defaultWallet.passwordErrorNum)

					if(this.defaultWallet.passwordErrorNum < 15) {
						this.$showToast(('密码输入错误，请重新输入，剩余次数 $remainingTimes').replace('$remainingTimes', 15-this.defaultWallet.passwordErrorNum))
					} else {
						this.$showToast('当日密码输入错误次数过多，请明天再试')
					}

					//Judge whether the number of input errors is accumulated for 3 times
					if(this.defaultWallet.passwordErrorNum == 15) {
						const times = new Date().getTime(); //Record the last submission time
						this.$store.commit('setLastPassWordTime', times)
						this.a_fail && this.a_fail();
					}

					return
				}

				//Correct password operation
				this.a_success && this.a_success(this.password);
				this.$emit('click', {status: true, password: this.password })
				this.closePasswordPopup()
				this.$store.commit('setPasswordErrorNum', 0)
				this.$store.commit('setLastPassWordTime', 0)
			}

		}
	}
</script>

<style scoped lang="scss">
	.password-popup-container {
		width: 600rpx;
		height: 380rpx;
		background: #fff;
		border-radius: 20rpx;
		padding-top: 39rpx;
		box-sizing: border-box;
		.password-popup-title {
			font-size: 36rpx;
			font-weight: 500;
			margin-bottom: 80rpx;
			text-align: center;
		}
		.password-popup-input {
			width: 100%;
			display: flex;
			margin-bottom: 40rpx;
			padding:0 61rpx ;
			box-sizing: border-box;
			input {
				width: 100%;
				padding: 0 20rpx;
				padding-bottom: 23rpx;
				border-bottom: 2rpx solid #223968;
			}
		}
		.password-popup-footer {
			display: flex;
			border-top: 1px solid #ddd;
			height: 100rpx;
			font-size: 34rpx;
			color: #999;
			.password-popup-btn {
				flex: 1;
				text-align: center;
				line-height: 100rpx;
				box-sizing: border-box;
			}
		}
	}
</style>
